<template>
	<view class="content">
		<swiper class="swiperBox" autoplay="true" circular="true">
			<swiper-item class="swiperItem" v-for="(item,index) in banner" :key="index">
				<image :src="item.url" class="swiperItem"></image>
			</swiper-item>
			<image :src="baseUrl+'img/index/arrow.png'" class="arrow"></image>
			<view class="messageBox" v-if="messages.length>0">
				<swiper vertical="true" autoplay="true" circular="true">
					<swiper-item v-for="(item,index) in messages" :key="index">
						<text class="messageType ellipsis">{{item.msg_name}}</text>
						<text class="messageInfo ellipsis">{{item.status_name}}</text>
					</swiper-item>
				</swiper>
			</view>
		</swiper>
		<view class="newsBox">
			<view class="line"></view>
			<swiper style="width: 100%;height: 100%;" @change="changeNews" circular="true" vertical='true'
				autoplay="true">
				<swiper-item v-for="(item,index) in news.slice(0, 5)" :key="index">
					<text class="newsTime">{{$formatDateString(item.created_at)}}</text>
					<view class="line1"></view>
					<text class="newsTitle ellipsis">{{item.name}}</text>
					<text class="newsDes ellipsis">{{item.title}}</text>
					<view class="infoBtn" @click="$navto.navto('/pages/news_info/news_info',{id:item.id})">查看详情</view>
					<view class="allBtn" @click="$navto.navto('/pages/news_index/news_index')">所有新闻</view>
				</swiper-item>
			</swiper>
			<text class="newsLabel">NEWS</text>
			<view class="newsDotBox">
				<view class="dot" :class="newsIndex==index?'dotActive':''" v-for="(item,index) in news.slice(0, 5)"
					:key="index">
				</view>
			</view>
		</view>
		<view class="menuBox">
			<image :src="baseUrl+'img/index/menu1.png?v=1.0'" class="menuIcon"  @click="$toMini('wx78b3a0aa29ecfd38','/pages/home/index')">
			</image>
			<image :src="baseUrl+'img/index/menu2.png?v=1.0'" class="menuIcon"
				@click="$navto.navto('/pages/activity_index/activity_index')"></image>
			<image :src="baseUrl+'img/index/menu3.png?v=1.0'" class="menuIcon"
				@click="$switchTab('/pages/service/service')"  ></image>
			<image :src="baseUrl+'img/index/menu4.png?v=1.0'" class="menuIcon"
				@click="$switchTab('/pages/juanjiahui/juanjiahui')"></image>
		</view>
		<image :src="baseUrl+'img/index/jiaart.png?v=1.0'" class="jiaart"
			@click="$toMini('wx4d2be09a40063181','/pages/index/index')"></image>

		<view :style="{ height: capsuleHeight + 'px', top: capsuleTop + 'px' }" class="addressBox">
			<view class="addressInfox">
				<text class="addressEn">CHENG DU</text>
				<view class="addressBottomBox">
					<text class="addressZh">成都</text>
					<image :src="baseUrl+'img/index/address.png'" class="addressIcon"></image>
				</view>
			</view>
		</view>
		<!-- 侧边地址选择栏 -->
		<view class="addressSelBox" v-if="isAddressSelBox">
			<view class="addressSelLeftBox" :class="isAddressSelBox==true?'slideInLeft':''">
				<view class="backBox">
					<image :src="baseUrl+'img/index/back.png'" class="backIcon"></image>
					<text class="backLabel">返回</text>
				</view>
				<view class="nowAddressBox">
					<view class="nowAddressTop">
						<view class="line2"></view>
						<text class="nowAddressTopLabel">当前定位</text>
					</view>
					<view class="nowAddressBottom">
						<image :src="baseUrl+'img/index/address1.png'" class="address1"></image>
						<text class="nowAddressBottomLabel">CHENG DU 成都</text>
					</view>
				</view>
				<view class="otherAddressBox">
					<view class="otherAddressBoxTop">
						<view class="line2"></view>
						<text class="nowAddressTopLabel">选择城市</text>
					</view>
					<view class="otherAddressItemBox">
						<view class="otherAddressItem">
							<image :src="baseUrl+'img/index/address2.png'" class="address2"></image>
							<text class="otherAddressLabel">成 都</text>
							<image :src="baseUrl+'img/index/arrow1.png'" class="arrow1"></image>
						</view>
						<view class="otherAddressItem">
							<image :src="baseUrl+'img/index/address2.png'" class="address2"></image>
							<text class="otherAddressLabel">成 都</text>
							<image :src="baseUrl+'img/index/arrow1.png'" class="arrow1"></image>
						</view>
						<view class="otherAddressItem">
							<image :src="baseUrl+'img/index/address2.png'" class="address2"></image>
							<text class="otherAddressLabel">成 都</text>
							<image :src="baseUrl+'img/index/arrow1.png'" class="arrow1"></image>
						</view>
						<view class="otherAddressItem">
							<image :src="baseUrl+'img/index/address2.png'" class="address2"></image>
							<text class="otherAddressLabel">成 都</text>
							<image :src="baseUrl+'img/index/arrow1.png'" class="arrow1"></image>
						</view>
						<view class="otherAddressItem">
							<image :src="baseUrl+'img/index/address2.png'" class="address2"></image>
							<text class="otherAddressLabel">成 都</text>
							<image :src="baseUrl+'img/index/arrow1.png'" class="arrow1"></image>
						</view>
						<view class="otherAddressItem">
							<image :src="baseUrl+'img/index/address2.png'" class="address2"></image>
							<text class="otherAddressLabel">成 都</text>
							<image :src="baseUrl+'img/index/arrow1.png'" class="arrow1"></image>
						</view>
						<view class="otherAddressItem">
							<image :src="baseUrl+'img/index/address2.png'" class="address2"></image>
							<text class="otherAddressLabel">成 都</text>
							<image :src="baseUrl+'img/index/arrow1.png'" class="arrow1"></image>
						</view>
						<view class="otherAddressItem">
							<image :src="baseUrl+'img/index/address2.png'" class="address2"></image>
							<text class="otherAddressLabel">成 都</text>
							<image :src="baseUrl+'img/index/arrow1.png'" class="arrow1"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <m-tabbar fixed fill current="0" :tabbar="tabbar">
		</m-tabbar> -->
		<cc-myTabbar :tabBarShow="0"></cc-myTabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				capsuleHeight: 0,
				capsuleTop: 0,
				baseUrl: this.$baseUrl,
				banner: [],
				news: [],
				messages: [],
				newsIndex: 0,
				isAddressSelBox: false,
			}
		},
		onShow() {
			uni.hideTabBar();
		},
		onLoad() {
			uni.hideTabBar();
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.capsuleHeight = menuButtonInfo.height * 2; // 获取胶囊按钮的高度
			this.capsuleTop = menuButtonInfo.top; // 获取胶囊按钮的顶部位置
			uni.hideHomeButton();
			// 轮播
			this.$request.get('ad_list').then(res => {
				this.banner = res.data.data;
			})
			// 文章
			this.$request.get('articleIndex').then(res => {
				this.news = res.data.data
			})
			if (this.token) {
				this.getMessage();
			} else {
				this.$store.watch(
					(state) => state.token,
					(newToken) => {
						if (newToken) {
							this.getMessage();
						}
					}
				);
			}
		},
		methods: {
			getMessage() {
				// 消息
				this.$request.get('msg_list').then(res => {
					this.messages = res.data.data
				})
			},
			changeNews(event) {
				this.newsIndex = event.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.jiaart {
		width: 670rpx;
		height: 80rpx;
		margin-top: 25rpx;
		margin-left: 40rpx;
	}

	.addressSelBox {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99999;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		overflow: hidden;

		.otherAddressBox {
			position: relative;
			z-index: 1;
			margin-top: 97rpx;

			.otherAddressItemBox {
				overflow-y: scroll;
				height: 55vh;

				.otherAddressItem {
					width: 520rpx;
					height: 75rpx;
					display: flex;
					align-items: top;
					border-bottom: 1rpx solid #c2c2c2;
					margin-left: 40rpx;
					position: relative;
					z-index: 1;
					margin-bottom: 47rpx;

					.address2 {
						width: 19rpx;
						height: 24rpx;
					}

					.otherAddressLabel {
						font-weight: 500;
						font-size: 26rpx;
						color: #121212;
						margin-left: 40rpx;
						margin-top: -4rpx;
					}

					.arrow1 {
						position: absolute;
						width: 11rpx;
						height: 17rpx;
						top: 0;
						right: 0;
					}
				}

				.otherAddressItem:last-child {
					border: none;
				}

			}

			.otherAddressBoxTop {
				display: flex;
				align-items: center;
				margin-bottom: 60rpx;

				.line2 {
					width: 4rpx;
					height: 20rpx;
					background: #ff6e5d;
				}

				.nowAddressTopLabel {
					font-weight: 700;
					font-size: 22rpx;
					color: #121212;
					margin-left: 40rpx;
				}
			}
		}

		.nowAddressBox {
			position: relative;
			margin-top: 75rpx;
			width: 100%;
			z-index: 1;

			.nowAddressBottom {
				display: flex;
				align-items: center;
				margin-top: 57rpx;
				margin-left: 40rpx;

				.address1 {
					width: 24rpx;
					height: 30rpx;
				}

				.nowAddressBottomLabel {
					margin-left: 32rpx;
					font-weight: 900;
					font-size: 30rpx;
					color: #121212;
				}
			}

			.nowAddressTop {
				display: flex;
				align-items: center;

				.line2 {
					width: 4rpx;
					height: 20rpx;
					background: #ff6e5d;
				}

				.nowAddressTopLabel {
					font-weight: 700;
					font-size: 22rpx;
					color: #121212;
					margin-left: 40rpx;
				}
			}
		}

		.backBox {
			width: 560rpx;
			height: 231rpx;
			background-color: #ffffff;
			margin-left: 40rpx;
			display: flex;
			position: relative;
			align-items: center;
			z-index: 1;

			.backIcon {
				width: 32rpx;
				height: 22rpx;
				margin-top: 5rpx;
			}

			.backLabel {
				font-weight: 500;
				font-size: 24rpx;
				color: #121212;
				margin-left: 20rpx;
			}
		}

		.addressSelLeftBox {
			width: 600rpx;
			height: 100%;
		}

		.addressSelLeftBox::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 600rpx;
			height: 14%;
			background-color: #ffffff;
		}

		.addressSelLeftBox::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 600rpx;
			height: 86%;
			background-color: #f0f0f0;
		}
	}

	.newsBox {
		position: relative;
		width: 750rpx;
		height: 318rpx;
		// margin-top: 100rpx;
		border-bottom: 1rpx solid #c2c2c2;

		.newsDotBox {
			position: absolute;
			right: 55rpx;
			top: 210rpx;
			width: 9rpx;
			display: flex;
			flex-direction: column;

			.dot {
				position: relative;
				width: 9rpx;
				height: 9rpx;
				border-radius: 50%;
				border: 1rpx solid #121212;
				margin-bottom: 8rpx;
			}

			.dotActive {
				background-color: #121212;
			}
		}

		.newsLabel {
			position: absolute;
			right: 40rpx;
			top: 90rpx;
			font-weight: 400;
			width: 18rpx;
			height: 66rpx;
			font-size: 22rpx;
			color: #121212;
			writing-mode: vertical-rl;
		}

		.allBtn {
			position: absolute;
			left: 467rpx;
			top: 196rpx;
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 30rpx;
			font-weight: 500;
			font-size: 16rpx;
			color: #000000;
			border: 1rpx solid #121212;
			letter-spacing: 2rpx;
			box-sizing: border-box;
		}

		.infoBtn {
			position: absolute;
			left: 300rpx;
			top: 196rpx;
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 30rpx;
			background: #121212;
			font-weight: 500;
			font-size: 16rpx;
			color: #FFFFFF;
			letter-spacing: 2rpx;
		}

		.newsDes {
			position: absolute;
			left: 213rpx;
			top: 122rpx;
			color: #121212;
			font-weight: 900;
			font-size: 30rpx;
			width: 435rpx;
		}

		.newsTitle {
			position: absolute;
			width: 435rpx;
			left: 213rpx;
			top: 75rpx;
			color: #121212;
			font-weight: 900;
			font-size: 30rpx;
		}

		.newsTime {
			position: absolute;
			left: 40rpx;
			top: 75rpx;
			font-weight: 700;
			font-size: 30rpx;
			color: #121212;
		}

		.line1 {
			position: absolute;
			left: 158rpx;
			top: 90rpx;
			width: 18rpx;
			height: 4rpx;
			background: #ff6e5d;
		}

		.line {
			position: absolute;
			width: 1rpx;
			height: 100%;
			background-color: #c2c2c2;
			right: 100rpx;
			top: 0;
		}
	}

	.menuBox {
		width: 670rpx;
		height: 526rpx;
		margin-top: 100rpx;
		margin-left: 40rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		.menuIcon {
			width: 323rpx;
			height: 250rpx;
		}
	}

	.arrow {
		position: absolute;
		width: 17rpx;
		height: 11rpx;
		left: 370rpx;
		top: 1390rpx;
		-webkit-animation: arrow 1.5s infinite alternate;
		animation: arrow 1.5s infinite alternate;
	}

	.messageBox {
		width: 670rpx;
		height: 78rpx;
		background: url(https://qn-h5-video.guguan.net/juanjiahui/img/index/messagebg.png);
		background-size: 100% 100%;
		bottom: 150rpx;
		left: 40rpx;
		overflow: hidden;
		position: absolute;

		.messageType {
			font-weight: 900;
			width: 177rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 78rpx;
			text-align: center;
			display: inline-block;
		}

		.messageInfo {
			font-weight: 900;
			width: 174rpx;
			font-size: 22rpx;
			color: #FFFFFF;
			line-height: 78rpx;
			margin-left: 275rpx;
			text-align: center;
			display: inline-block;
		}
	}

	.addressBox {
		display: flex;
		flex-direction: column;
		width: 100%;
		position: absolute;
		z-index: 1;

		.addressInfox {
			display: flex;
			flex-direction: column;
			margin-left: 40rpx;

			.addressEn {
				font-weight: 400;
				font-size: 28rpx;
				color: #121212;
			}

			.addressBottomBox {
				display: flex;
				justify-content: space-between;
				width: 150rpx;
				margin-top: 20rpx;
				align-items: flex-end;

				.addressZh {
					font-weight: 700;
					font-size: 28rpx;
					color: #121212;
				}

				.addressIcon {
					width: 10rpx;
					height: 10rpx;
					margin-bottom: 6rpx;
				}
			}
		}

	}

	.swiperBox {
		position: relative;
		z-index: -1;
		width: 100%;
		height: 1494rpx;

		.swiperItem {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		padding-bottom: 160rpx;
	}
</style>